canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结

来源:网络整理作者: 发布时间:2020-12-21 00:20

canvas元素在html5中是用于在浏览器中画图的，所以canvas可以实现绘制很多不同的图，那么，今天我们就来看一看ca...

二、canvas画椭圆之使用贝赛尔曲线绘制椭圆

这种方法用到了一个canvas函数scale，scale函数能实现canvas的缩放。缩放有水平和垂直两个方向，代码中把canvas水平方向放大了，而垂直方向不变，因此，原来arc画出的圆形就变成了一个椭圆。

这种方法绘制椭圆是把一个椭圆分成了4条贝塞尔曲线，用他们连成了一个椭圆。

canvas元素在html5中是用于在浏览器中画图的，所以canvas可以实现绘制很多不同的图，那么，今天我们就来看一看canvas如何来绘制一个椭圆形，话不多说，让我们来直接看正文吧。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>椭圆</title> </head> <body> <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"> 当前浏览器不支持Canvas，请更换浏览器后再试 </canvas> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx=canvas.getContext('2d'); canvas.width = 800; canvas.height = 800; if(ctx.ellipse){ ctx.ellipse(300,300,200,100,0,0,Math.PI*2); ctx.fillStyle="blue"; ctx.strokeStyle="#000"; ctx.fill(); ctx.stroke(); }else{ alert("no ellipse!"); } } </script> </body> </html>
canvas画的椭圆效果如下：
canvas绘制椭圆的代码如下：
canvas绘制椭圆的代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>椭圆</title> </head> <body> <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"> 当前浏览器不支持Canvas，请更换浏览器后再试 </canvas> <script> var canvas = document.getElementById("canvas"); canvas.width = 600; canvas.height = 600; var context = canvas.getContext("2d"); context.lineWidth = 10; context.strokeStyle="black"; BezierEllipse2(context, 470, 200, 100, 20); //椭圆 function BezierEllipse2(ctx, x, y, a, b){ var k = .5522848, ox = a * k, // 水平控制点偏移量 oy = b * k; // 垂直控制点偏移量</p> <p> ctx.beginPath(); //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线 ctx.moveTo(x - a, y); ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b); ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y); ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b); ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y); ctx.closePath(); ctx.stroke(); }; </script> </body> </html>
canvas椭圆效果如下：
本篇文章到这里就结束了，更多精彩内容可以关注聚合云库。
以上就是canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结的详细内容，更多请关注聚合云库其它相关文章！
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = 0; var centerY = 0; var radius = 50; // save state context.save(); // translate context context.translate(canvas.width / 2, canvas.height / 2); // scale context horizontally context.scale(2, 1); // draw circle which will be stretched into an oval context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); // restore to original state context.restore(); // apply styling context.fillStyle = 'pink'; context.fill(); context.lineWidth = 5; context.strokeStyle = 'black'; context.stroke(); </script> </body> </html>
canvas椭圆效果如下：

参数（从左到右）：

三、canvas画椭圆之使用两条贝赛尔曲线画出椭圆

说明：这种方法目前似乎只有谷歌支持，其他浏览器还未存在ellipse()。

首先我们来看一下canvas自带的绘制椭圆的方法

既然上述方法无法支持其他浏览器，我们就来看看其他canvas绘制椭圆的方法。

(起点x,起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)

我们来看canvas自带的绘制椭圆的方法代码：

贝塞尔控制点x=(椭圆宽度/0.75)/2。

canvas绘制椭圆的代码如下：

2345截图20180920114034.png

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)。

一、利用canvas画圆的方法来绘制一个椭圆

//椭圆 CanvasRenderingContext2D.prototype.oval = function (x, y, width, height) { var k = (width/0.75)/2, w = width/2, h = height/2; this.beginPath(); this.moveTo(x, y-h); this.bezierCurveTo(x+k, y-h, x+k, y+h, x, y+h); this.bezierCurveTo(x-k, y+h, x-k, y-h, x, y-h); this.closePath(); return this; }

注意：这个方法只需要记住这一点，椭圆的宽度与画出椭圆的贝赛尔曲线的控制点的坐标比例如下：

HTML5 学习总结（四）canvas绘图	canvas与html5实现视频截图成果
html5 canvas常用api总结(二)画图	Canvas跨域的解决方案介绍
canvas实现图片涂鸦功能（附代	用canvas实现简单的下雪效果（
HTML5 canvas中如何绘制图像	如何使用HTML5 canvas实现图像的
在canvas上实现元素图片镜像翻	html5利用canvas绘画二级树形结构
canvas绘制各种基本图形	利用Canvas模仿百度贴吧客户端
html5使用html2canvas实现浏览器截	HTML5 canvas绘制五角星的方法
html5使用canvas实现跟随光标跳动	使用canvas画“哆啦A梦”时钟的

CSS/HTML

canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结

相关文章

热门TAG

最新文章

热门文章